import React from 'react';
import './index.less'
import loginImg from '../../assets/image/login-img.png'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

class Login extends React.Component {
    onFinish = (values) => {
        $http.post('/users/login', values).then(res => {
            if (res) {
                localStorage.setItem('userInfo', JSON.stringify(res))
                this.props.history.push('/home')
            }
        })
    };
    render() {
        return (
            <div className="login">
                <img className="login-img" src={loginImg} alt=""></img>
                <div className="login-form-wrap">
                    <div className="login-header">登录账户</div>
                    <Form name="normal_login" className="login-form" initialValues={{ remember: true, }} onFinish={this.onFinish}>
                        <Form.Item name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名',
                                },
                            ]}>
                            <Input allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}>
                            <Input allowClear prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住密码</Checkbox>
                            </Form.Item>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}
export default Login
